<template>
  <div class="avue-sidebar">
    <logo></logo>
    <el-scrollbar>
      <div v-if="validatenull(menu)" class="avue-sidebar--tip">
        {{ $t('menuTip') }}
      </div>
      <el-menu
        unique-opened
        :default-active="nowTagValue"
        mode="vertical"
        :show-timeout="200"
        :collapse="keyCollapse"
      >
        <sidebar-item
          :menu="menu"
          :screen="screen"
          first
          :props="website.menu.props"
          :collapse="keyCollapse"
        ></sidebar-item>
      </el-menu>
    </el-scrollbar>
    <div class="avue-breadcrumb" v-if="showCollapse && collIt">
      <i v-if="!isCollapse" class="el-icon-s-fold" @click="setCollapse"></i>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import store from '@/store/index.js'

export default {
  name: 'sidebar',
  components: {
    logo: () => {
      if (store.state.pageStyle == '1') {
        return import('../logo')
      } else {
        return import('../logoDrawerStyle')
      }
    },
    sidebarItem: () => {
      if (store.state.pageStyle == '1') {
        return import('./sidebarItem')
      } else {
        return import('./sidebarItemDrawerStyle')
      }
    }
  },

  inject: ['index'],
  data () {
    return {
      collIt: true
    }
  },
  created () {
    this.index.openMenu(this.menuId)
  },
  computed: {
    ...mapGetters([
      'website',
      'menu',
      'tag',
      'keyCollapse',
      'screen',
      'menuId',
      'isCollapse'
    ]),
    ...mapState({ showCollapse: state => state.common.showCollapse }),
    nowTagValue: function () {
      return this.$router.$avueRouter.getValue(this.$route)
    }
  },
  mounted () {},
  methods: {
    setCollapse () {
      this.$store.commit('SET_COLLAPSE')
    }
  }
}
</script>
<style lang="scss" scoped></style>
